<template>
   <div>
     <div class="table-tips">
        <span>📝 使用说明：双击单元格进入编辑模式，支持框选/复制/粘贴。所有修改需手动保存生效。</span>
    </div>
    <div class="table-wrapper" :style="{ height: maxHeight }">
        <ve-table
            fixed-header
            :max-height="maxHeight"
            :columns="columns"
            :scroll-width="600"
            :table-data="tableList"
            rowKeyFieldName="number"
            :rowStyleOption="rowStyleOption"
            :clipboard-option="clipboardOption"
            :virtual-scroll-option="virtualScrollMain"
            :cell-autofill-option="cellAutofillOptionDialog"
            :edit-option="editOption"
            border-y
            border-x
            ref="veTable"
        />
    </div>
   </div>
</template>
<script>
import {PointMonitor} from "@/api/https";
export default {
    name:'instrumentTable',
    props:{
        maxHeight:{
            type:String,
            default:'400px'
        },
        tableList:{
            type:Array,
            default:()=>{
                return []
            }
        },
        enableVirtualScroll: {
            type: Boolean,
            default: false
        },
        showRoleCheck:{
            type:Number,
            default:0
        }
    },
    data() {
        return{
            rowStyleOption: {
                clickHighlight: false,
                hoverHighlight: true,
            },
            clipboardOption: {
                copy: true,
                paste: true,
                cut: false,
                delete: false,
                afterPaste:(data)=>{
                    this.$emit('afterPasete',data)
                }
            },
            virtualScrollMain:{
                enable:this.enableVirtualScroll,
                scrolling: this.scrolling,
            },
            cellAutofillOptionDialog: {
                directionX: false,
                directionY: true,
            },
            editOption: {
                afterCellValueChange: ({ row, column, changeValue }) => {
                    this.$emit('afterCellValueChange',row)
                },
            },
            PointMonitorList:[],
        }
    },
    mounted(){
        this.PointMonitorSelect()
    },
    watch:{
        enableVirtualScroll(newVal) {
            this.virtualScrollMain.enable = newVal;
        },
    },
    computed:{
        columns(){
            const columns = [{
                field: "number",
                key: "number",
                operationColumn: true,
                title: "序号",
                width: 50,
                fixed: "left",
            },
            {
                title: '测点编号',
                field: 'pointName',
                key: 'pointName',
                edit: false,
                width: 140
            },
            {
                title: '埋设位置',
                field: 'buriedLocation',
                key: 'buriedLocation',
                edit: this.showRoleCheck == 1 ? true : false,
                width: 120
            },
            {
                title: '坝横桩号',
                field: 'horizontalPile',
                key: 'horizontalPile',
                edit: this.showRoleCheck == 1 ? true : false,
                width: 120
            },
            {
                title: '坝纵桩号',
                field: 'verticalPile',
                key: 'verticalPile',
                edit: this.showRoleCheck == 1 ? true : false,
                width: 120
            },
            {
                title: '高程',
                field: 'elevation',
                key: 'elevation',
                edit: this.showRoleCheck == 1 ? true : false,
                width: 120
            },
            {
                title: '重要测点',
                field: 'isImportant',
                key: 'isImportant',
                edit: false,
                width: 140,
                renderBodyCell: ({ row, column, rowIndex }, h) => {
                return (
                    <el-select
                    size="small"
                    style="width:100px"
                    disabled={this.showRoleCheck == 0}
                    value={row["isImportant"]}
                    on-input={(val) => {
                        row["isImportant"] = val;
                        this.cellDataChange(row, column, val);
                    }}
                    placeholder="请选择"
                    >
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                    </el-select>
                );
                },
            },
            {
                title: '始测日期',
                field: 'startingDate',
                key: 'startingDate',
                edit: false,
                width: 180,
                renderBodyCell: ({ row, column, rowIndex }, h) => {
                return (
                    <el-date-picker
                    size="small"
                    style="width:160px"
                    value={row["startingDate"]}
                    type="date"
                    format="yyyy年MM月dd日"
                    disabled={this.showRoleCheck == 0}
                    value-format="yyyy/MM/dd"
                    on-input={(val) => {
                        row["startingDate"] = val;
                        this.cellDataChange(row, column, val);
                    }}
                    placeholder="选择日期">
                    </el-date-picker>
                )},
            },
            {
                title: '监测频次',
                field: 'monitorID',
                key: 'monitorID',
                edit: false,
                width: 160,
                renderBodyCell: ({ row, column, rowIndex }, h) => {
                return (
                    <el-select
                    size="small"
                    style="width:130px"
                    value={row["monitorText"]}
                    disabled={this.showRoleCheck == 0}
                    on-input={(val) => {
                        row["monitorText"] = val;
                        this.cellDataChange(row, column, val, 'monitor');
                    }}
                    placeholder="请选择">  
                    {
                        this.PointMonitorList.map(item => {
                        return <el-option label={item.text} value={item.text}></el-option>
                        })
                    }
                    </el-select>
                );
                },
            },
            {
                title: '目前仪器状态',
                field: 'workStatus',
                key: 'workStatus',
                edit: false,
                width: 160,
                renderBodyCell: ({ row, column, rowIndex }, h) => {
                return (
                    <el-select
                    size="small"
                    style="width:130px"
                    disabled={this.showRoleCheck == 0}
                    value={row["workStatus"]}
                    on-input={(val) => {
                        row["workStatus"] = val;
                        this.cellDataChange(row, column, val);
                    }}
                    placeholder="请选择"
                    >
                    <el-option label="正常在测" value="正常在测"></el-option>
                    <el-option label="一般性检查" value="一般性检查"></el-option>
                    <el-option label="停测" value="停测"></el-option>
                    <el-option label="封存" value="封存"></el-option>
                    <el-option label="损坏" value="损坏"></el-option>
                    <el-option label="报废" value="报废"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                    <el-option label="报备" value="报备"></el-option>
                    </el-select>
                );
                },
            },
            {
                title: '采集类型',
                field: 'collectionTypes',
                key: 'collectionTypes',
                edit: false,
                width: 160,
                renderBodyCell: ({ row, column, rowIndex }, h) => {
                return (
                    <el-select
                    size="small"
                    style="width:130px"
                    value={row["collectionTypes"]}
                    disabled={this.showRoleCheck == 0}
                    on-input={(val) => {
                        row["collectionTypes"] = val;
                        this.cellDataChange(row, column, val);
                    }}
                    placeholder="请选择"
                    >
                    <el-option label="人工" value="人工"></el-option>
                    <el-option label="自动化" value="自动化"></el-option>
                    </el-select>
                );
                },
            }
        ];
        return columns
    }
  },
  methods:{
    PointMonitorSelect(){
        PointMonitor().then(res=>{
            if(res.isSuccess && res.data){
                this.PointMonitorList = res.data || []
            }else{
                this.PointMonitorList = []
            }
        })
    },
    cellDataChange(row, column, cellValue,type) {
        this.$emit('cellDataChange',row,type)
    },
    scrolling({
        startRowIndex,
        visibleStartIndex,
        visibleEndIndex,
        visibleAboveCount,
        visibleBelowCount,
    }) {
        if (this.timer) clearTimeout(this.timer)
        
        // 检测是否滚动到底部
        if(visibleBelowCount <= 0){
            this.timer = setTimeout(() => {
                this.loadMoreData()
            }, 300)
        }else{
            clearTimeout(this.timer)
        }
    },
    
    loadMoreData(){
        this.$emit('load-more')
    },
  }
}
</script>
<style scoped>

</style>